<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>Demo - 动画队列支持</title>
<link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>

<link href="../../button/demo/assets/custombutton.css" rel="stylesheet"/>
<style>
    .playground {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 20px;
        border: 5px dashed #AABBCC;
    }

    .anim {
        position: absolute;
        width: 32px;
        height: 32px;
    }

    .right {
        background: transparent url(assets/right.png) no-repeat center center;
    }

    .left {
        background: transparent url(assets/left.png) no-repeat center center;
    }

    .up {
        background: transparent url(assets/up.png) no-repeat center center;
    }

    .down {
        background: transparent url(assets/down.png) no-repeat center center;
    }
</style>
<script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/anim/config.js"></script>
</head>
<body>
<div class="playground">
    <div class="anim" id="animObj"></div>
</div>
<script>
    // prefetch
    window.image1 = new Image();
    window.image1.src = "assets/right.png";

    window.image2 = new Image();
    window.image2.src = "assets/left.png";

    window.image3 = new Image();
    window.image3.src = "assets/up.png";

    window.image4 = new Image();
    window.image4.src = "assets/down.png";
</script>
<script src="assets/queue.js"></script>
</body>
</html>